<template>
	<view class="purchase-top">
	</view>
	<view class="purchase-content">
		<view class="product">
			<image class="product-img" :src="productData.productImagePath" mode=""></image>
			<view class="product-Introduction">
				<view class="product-price">
					￥{{productData.price}}
				</view>
				<view class="product-name">
					{{productData.productName}}
				</view>
			</view>
			<view class="product-description-title">
				商品描述
			</view>
			<view class="product-description">
				{{productData.productDetails}}
			</view>
			<view class="product-description-title">
				购买详情
			</view>
			<view class="product-quantity-amount">
				<view class="product-quantity">
					商品数量:<van-stepper v-model="orderParams.productQuantity" @change="onChange" />
				</view>
				<view class="product-amount">
					商品价格：￥{{orderParams.productAmount}}
				</view>
			</view>
			<van-radio-group v-model="radio">
				<van-cell-group class="payment">
					<van-cell title="支付宝支付" clickable @click="radio = '1'">
						<image class="payment-icon" src="../../static/payment/支付宝.png" mode=""></image>
						<van-radio slot="right-icon" name="1" />
					</van-cell>
					<van-cell title="微信支付" clickable @click="radio = '2'">
						<image class="payment-icon" src="../../static/payment/微信.jpg" mode=""></image>
						<van-radio slot="right-icon" name="2" />
					</van-cell>
					<van-cell title="中国银行支付" clickable @click="radio = '3'">
						<image class="payment-icon" src="../../static/payment/中国银行.jpg" mode=""></image>
						<van-radio slot="right-icon" name="3" />
					</van-cell>
				</van-cell-group>
			</van-radio-group>
		</view>
	</view>
	<view class="purchase-bottom">
		<van-goods-action>
			<!-- <van-goods-action-icon icon="chat-o" text="客服" @click="kefu" /> -->
			<van-goods-action-icon icon="cart-o" text="购物车" info="" @click="clickShoppingCart" />
			<van-goods-action-icon icon="service-o" text="客服" @click="clickMerchant" />
			<van-goods-action-button color="#aaaaff" text="加入购物车" type="warning" @click="addShoppingCart" />
			<van-goods-action-button color="#5500ff" text="立即购买" @click="clickPurchase" />
		</van-goods-action>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getProductInfo
	} from '@/api/purchase.js'
	import { addToCart } from '@/api/shoppingCart.js'
	// 商品参数
	const orderParams = reactive({
		userId: 1,
		productId: null,
		totalAmount: 350,
		orderName: null,
		orderImg: null,
		productQuantity: 1,
		productAmount: 0
	})
	const productData = ref()
	// 监听 productQuantity 的变化
	const onChange = (value) => {
		orderParams.productAmount = productData.value.price * value.detail
	}
	const clickShoppingCart = () => {
		console.log(2222222222)
		uni.navigateTo({
			url:'/pages/shoppingCart/shoppingCart'
		})
	}
	const clickMerchant = () => {
		console.log(3333333333)
		uni.navigateTo({
			url:'/pages/customerService/customerService'
		})
	}
	const addShoppingCart = async () => {
		try {
			const cartData = {
				userId: orderParams.userId,
				productId: orderParams.productId,
				productQuantity: orderParams.productQuantity,
				price: productData.value.price,
				productName: productData.value.productName,
				productImagePath: productData.value.productImagePath,
				productDetails: productData.value.productDetails
			}
			const res = await addToCart(cartData)
			if (res.data.code === 200) {
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				})
			}else{
				uni.showToast({
					title: '添加失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('添加购物车失败:', error)
			uni.showToast({
				title: '添加失败',
				icon: 'none'
			})
		}
	}
	const clickPurchase = () => {
		console.log("立即购买")
		toPayment();
	}
	// 支付宝支付 lxudid2423@sandbox.com
	const toPayment = async () => {
		// 判断是否为小程序环境，这里只是示例，实际需要根据项目情况判断
		if (typeof uni !== 'undefined') {
			// 打开一个新页面，在该页面中使用 web-view 加载支付页面
			uni.navigateTo({
				url: `/pages/paymentWebView/paymentWebView?payurl=http://localhost:8080/system/alipay/pay&userId=${orderParams.userId}&totalAmount=${orderParams.productAmount}&orderName=${orderParams.orderName}&orderImg=${orderParams.orderImg}`
			}).then(res => {
				// handleStart()
			})
		}
	};
	onLoad((data) => {
		orderParams.productId = data.productId
	});
	onMounted(() => {
		getProductInfo(orderParams.productId).then(res => {
			productData.value = res.data.data
			orderParams.productAmount = res.data.data.price
			console.log('productData', productData.value)
		})
		uni.getStorage({
			key: "userId",
			success(res) {
				orderParams.userId = res.data
				console.log('获取storage的userId：', orderParams.userId)

			}
		})
	})
</script>

<style lang="scss" scoped>
	.purchase-top {
		.van-nav-bar {
			padding-top: 47px;
		}
	}

	.purchase-content {
		display: flex;
		justify-content: center;

		.product {

			.product-img {
				margin: 0 50rpx;
				min-width: 450rpx;
				min-height: 450rpx;

			}

			.product-Introduction {
				display: flex;
				justify-content: space-around;
				font-size: 48rpx;
				font-weight: 700;
				padding: 20rpx 10rpx;

				.product-price {
					color: orange;
				}

				.product-name {}
			}

			.product-description-title {
				margin: 10rpx 20rpx;
				font-size: 36rpx;
				color: #af8418;
				display: flex;
			}

			.product-description {
				margin: 0 20rpx;
				font-size: 24rpx;
				font-weight: 300;
			}

			.product-quantity-amount {
				display: flex;
				justify-content: space-around;

				.product-quantity {
					display: flex;
				}

				.product-amount {
					margin: 0 30rpx;
					color: orange;
				}
			}

			.payment {
				.payment-icon {
					width: 75rpx;
					height: 75rpx;
					margin: 0 20rpx 0 0;
				}
			}
		}
	}
</style>